全端入門Day21_前端程式撰寫之Vue.js

2021 iThome 鐵人賽

DAY 21

自我挑戰組

我要成為全端王!系列第 21 篇

13th鐵人賽

我是低調

2021-09-21 00:22:43

674 瀏覽

分享至

昨天介紹了JavaScript，今天就要來介紹JavaScript的框架：Vue

我不會介紹有關太多Vue的功能，能夠用基本的功能代表已經往前一步了，之後要往下繼續學就看個人的需求了。

Vue.js入門

第一次自學Vue所以有錯請多包涵，可以在底下跟我說有錯誤什麼的，我們直接上程式碼：

我們先在新的檔案夾裡面新增一個html檔案，然後再補上div標籤，這個標籤我們把ID設成app

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">{{hi}}</div>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
            hi: 'hello Vue.js!'
            }
        });
    </script>
</body>
</html>

之後寫一個Vue的語法，用script包住然後裡面要有el，這個el就是指JavaScript的document.getElementById("app")
data就是要把資料給輸出，首先會去對到el抓的ID然後把內容丟進去，就會是hi的內容被丟成hello Vue.js!
存檔成index.html然後把它打開就會看到這樣：